<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/">基础数据</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>网格类型管理</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 搜索区 -->
  <div style="height: 120px; padding: 10px; margin-top: 10px; border: 1px black solid;">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="网格类型名称">
        <el-input v-model="searchForm.GridTypeName" placeholder="网格类型名称" clearable />
      </el-form-item>
      <el-form-item label="网格类别">
        <el-select style="width: 130px;" v-model="searchForm.GridTypeCategory" placeholder="请选择类别">
          <el-option label="请选择" value="" />
          <el-option label="逻辑网格" value="逻辑网格" />
          <el-option label="物理网格" value="物理网格" />
        </el-select>


      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button> <el-button type="danger"
          @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- table区域 -->
  <div style="height: 580px; padding: 10px; margin-top: 10px; border: 1px black solid;">
    <el-button type="success" @click="openDialog(null)">添加</el-button>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px;">
      <el-table-column prop="id" label="网格类型编号" width="160" />
      <el-table-column prop="gridTypeName" label="网格类型名称" width="160" />
      <el-table-column prop="gridTypeCategory" label="网格类别" width="120" />
      <el-table-column fixed="right" label="操作" min-width="150">
        <template v-slot="rowdata">
          <el-button type="danger" size="small" @click='delData(rowdata.row)' v-if="rowdata.row.roleName != '系统管理员'">
            删除
          </el-button>
          <el-button type="primary" size="small" v-if="rowdata.row.roleName != '系统管理员'">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="form.isOpen">
    <el-form>
      <el-form-item label="网格类型名称">
        <el-input v-model="form.gridTypeName" placeholder="请输入网格类型名称"></el-input>
      </el-form-item>

      <el-form-item label="网格类型类别">
        <el-select v-model="form.gridTypeCategory" placeholder="请选择类别">
          <el-option label="请选择" value="请选择" />
          <el-option label="逻辑网格" value="逻辑网格" />
          <el-option label="物理网格" value="物理网格" />
        </el-select>
      </el-form-item>


      <el-form-item label="专业网格" v-if="form.gridTypeCategory == '逻辑网格'">
        <el-checkbox-group v-model="form.prefessionals">
          <el-checkbox v-for="item in allProfess" :value="item.id" name="prefessionals">
            {{ item.professionalGridName }}
          </el-checkbox>
        </el-checkbox-group>



      </el-form-item>

    </el-form>

    <el-button type="success" @click="save()">保存</el-button>
    <el-button type="success" @click="form.isOpen = false">取消</el-button>
  </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const allProfess = ref([]);
const setProfess = () => {
  axios.get('https://localhost:7016/api/GridType/GetAllProfessional').then(res => {

    allProfess.value = res.data.data
  })

}

const save = () => {

  axios.post('https://localhost:7079/api/GridType/CreateGridType', form)
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg)
        getData();
        form.isOpen=false;
      }else{
        ElMessage.error(res.data.msg)
      }
    })
}

const openDialog = () => {
  form.isOpen = true;



}
const form = reactive({
  isOpen: false,
  gridTypeName: '',
  gridTypeCategory: '',
  prefessionals: []
})
const searchForm = reactive({
  GridTypeName: '',
  GridTypeCategory: ''
})
const tableData = ref([]);
const getData = () => {
  console.log(searchForm)
  axios.get('https://localhost:7016/api/GridType/GetGridType', { params: searchForm })
    .then(res => {
      console.log(res.data.data);
      tableData.value = res.data.data;
    });
}

const search = () => {
  getData();
}

onMounted(() => {
  getData();
  setProfess();
});
</script>

<style></style>